<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<title>企业库存管理系统登录</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/font.css')}">
    <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/login.css')}">
    <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/xadmin.css')}">
    <script type="text/javascript" th:src="${urls.getForLookupPath('/js/jquery.min.js')}"></script>
    <script th:src="${urls.getForLookupPath('/lib/layui/layui.js')}" charset="utf-8"></script>
</head>
<body class="login-bg">
    
    <div class="login layui-anim layui-anim-up">
        <div class="message">企业库存管理系统登录</div>
        <div id="darkbannerwrap"></div>
        
        <form method="post" class="layui-form" th:action="@{/login}">
            <input th:value="${username}" name="username" placeholder="请输入用户名"  type="text" lay-verify="username" autocomplete="off" pattern="^[a-zA-Z0-9_-]{1,16}$" class="layui-input" >
            <hr class="hr15">
            <input th:value="${password}" name="password" lay-verify="password" placeholder="请输入密码"  type="password" class="layui-input">
            <hr class="hr15">
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 150px;vertical-align:bottom;">
                    <input type="text" name="captcha" lay-verify="captcha" autocomplete="off" placeholder="请输入验证码" class="layui-input">
                </div>
                <img th:src="@{../captcha/kaptcha.jpg}" title="看不清，点击换一张" id="codeImage" onclick="chageCode()" style="width: 180px;height: 50px;vertical-align: middle;">
            </div>
            <p style="color: #f13517e0; text-align:center" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
            <hr class="hr15">
            <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
            <hr class="hr20" >
        </form>
    </div>

    <script>
        $(function  () {
            layui.use(['form', 'layer'], function(){
              var form = layui.form;
                //自定义验证规则
                form.verify({
                    username:function (value) {
                        if(value.length===0){
                            return '请输入用户名!';
                        }
                    },
                    password: function(value) {
                        if (value.length===0) {
                            return '请输入密码!';
                        }
                    },
                    captcha:function (value) {
                        if (value.length===0) {
                            return '请输入验证码!';
                        }
                    }
                });

            });
        });
        function chageCode(){
            document.getElementById("codeImage").src="../captcha/kaptcha.jpg?"+Math.random();
        }
    </script>
</body>
</html>